<template>
  <!-- 首页数据看板 -->
  <div>
    <el-row :gutter="20" class="topDiv">
      全校核心数据看板
    </el-row>

    <el-row :gutter="20" style="background-color: #629f5d;height: 440px;">
      <h2>全校总收入和总开支情况</h2>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12" style="background-color: #5b80d0;height: 370px;">
        <h2>全校性别占比</h2>
      </el-col>
      <el-col :span="12" style="background-color: #a466c4;height: 370px;">
        <h2>全校学生占比</h2>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getHomeData } from "@/api/student";

export default {
  name: 'Dashboard',

  data() {
    return {
      chart1: null,
      chart2: null,
      chart3: null,

      studentData: [], //性别占比
      classData: [], //班级人数占比
    }
  },

  //钩子函数
  mounted() {
    this.getPageData();
  },

  methods: {

    //初始化页面数据
    init(){
      // 柱状图
      this.chart1 = this.$echarts.init(this.$refs.chart1)
      this.chart1.setOption(this.getOption1())
    },

    //柱状图
    getOption1() {
      return {
      }
    },

    //调用后台接口获取页面图表数据
    getPageData(){
      //初始化页面
      this.init();
    },

  }
}
</script>

<style lang="scss" scoped>
.topDiv{
  background-color: #ffffff;
  line-height: 50px;
  text-align: center;
  font-weight: bolder;
  font-size: 45px;
  color: #2966b9;
}
</style>
